<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       body{
           background-image: url(img/bg.jpg) ;
           background-repeat: no-repeat;
           background-size: cover;
       }
       .header{
           width: 1200px;
           background-color: skyblue;
           margin: auto;
           overflow: hidden;
           background-image: url(img/header_bg.png);
           background-repeat: repeat-x;
       }
       .nav{
           width: 600px;
           overflow: hidden;
           margin: auto;
       }
       .nav ul{
           list-style: none;
       }
       .nav ul li{
           float: left;
           width: 120px;
           height: 40px;
           margin: auto;
           text-align: center;
           line-height: 40px;
       }
       .nav ul li a{
           display: block;
           width: 120px;
           height: 40px;
       }
       .nav ul li a:link , .nav ul li a:visited{
			text-decoration: none;
            color:dimgrey;
		}
       .nav ul li a:hover{
           background-color:gray;
           color: white;
       }
       .content{
           width: 1200px;
           margin: auto;
           overflow: hidden;
       }
       .content .music{
           width: 400px;
           overflow: hidden;
           float: left;
       }
       .content .ind1{
           width: 578px;
           overflow: hidden;
           float: left;
           clear:left;
       }
       .content .ind1 .ind1_item1{
           width: 578px;
           height: 320px;
           background-image: url(img/index1.png);
           padding-top: 60px;
           float: left;
       }
       .content .ind1 .ind1_item2{
           margin-top: 50px;
           background-image: url(img/index2.png);
           width: 100%;
           height: 322px;
           float: left;
           clear: both;
           padding-top: 50px;
       }
       .ind1_item2 ul{
           list-style: url(img/item1.png);
       }
       .ind1_item2 li{
           width: 100%;
       }
       .ind2{
           width: 590px;
           height:829px;
           background-image: url(img/index3.jpg);
           float: right;
       }
       .qiang{
           clear: both;
           height: 15px;
           float: left;
       }
       .footer{
           width: 1200px;
           height: 130px;
           overflow: hidden;
           background-color: gold;
           margin: auto;
       }
       .foot{
           width: 850px;
           margin: auto;
       }
       .foot ul{
           list-style: none;
       }
       .foot ul li{
           margin-top: 10px;
           float: left;
           font-size: 10px;
           margin-left: 15px;
       }
    </style>
</head>
<body>
    <div class="header">
    <div class="nav">
        <ul>
            <li><a href="#">动画介绍</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">皮卡丘</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    </div>
    <div class="content">
        <div class="music">
            <audio controls="controls" id="mu" src="img/宝可梦主题曲 - めざせポケモンマスター[Huge米米翻唱].mp3"></audio>
        </div>
        <div class="ind1">
        <div class="ind1_item1"><marquee direction="left">&nbsp;&nbsp;<img src="img/pic1.jpg">&nbsp;&nbsp;<img src="img/pic2.jpg"></marquee></div>
        <div class="ind1_item2">
            <ul>
                <li>劇場版 精靈寶可夢《我們的故事》預售票券11月1日開搶！青春美少女 蘆田愛菜攜手AKB48前成員 川榮李奈， 獻聲夢幻共演!!</li>
                <li>與寶可夢的羈絆將引發奇蹟！精靈寶可夢 劇場版《我們的故事》12/7中日雙語同步上映</li>
                <li>台灣限定！寶可夢小智聲優∙松本梨香＆卡哇伊寶可夢大使11/4登台獻賀禮！</li>
                <li>體驗最初感動！精靈寶可夢20週年紀念電影《就決定是你了！》11/17中日雙語同步上映</li>
                <li>Nintendo 3DS『精靈寶可夢 究極之日／ 究極之月』2017年11月17日即將發售！</li>
                <li>Pokémon GO 即將新增繁體中文介面</li>
                <li>《神奇寶貝》再進化！全球華文版正式定名【精靈寶可夢】！！</li>
                <li>致【Pokémon Go】台灣玩家</li>
            </ul>
        </div>
        </div>
        <div class="ind2"></div>
    <div class="qiang"></div>
    </div>

    <div class="footer">
       <div class="foot">
           <ul>
               <li>©1997 Nintendo,Creatures,GAME FREAK,TV Tokyo,ShoPro,JR Kikaku. <p></p>
                    ©Pokémon. <p></p>
                    ©曼迪傳播有限公司 Taiwan Inc. All Rights Reserved.</li>
               <li><img src="img/logo04.png" ></li>
               <li><img src="img/logo05.png" alt=""></li>
               <li><img src="img/logo06.png" alt=""></li>
               <li><img src="img/logo07.png" alt=""></li>
               <li><img src="img/logo04.jpg" alt=""></li>
           </ul>
       </div>
        </div>
</body>
</html>